<template>
	<view class="content">
		<view class="top">
			<view class="img">
				<image src="../../static/assets/img/nengliangbang.png" style="width: 750rpx; height: 784rpx;"></image>
			</view>
			<view class="dier">
				<view v-if="list[1]">
					<view class="hg flexc">
						<image src="../../static/assets/img/dier.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[1].head_img" style="border: 3px #C2C2C2 solid;"></image>
						<view class="num flexc">{{list[1].points}}</view>
					</view>
					<view class="name flexc slh">{{list[1].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[1])"></image></view>
				</view>
			</view>
			<view class="diyi">
				<view  v-if="list[0]">
					<view class="hg flexc">
						<image src="../../static/assets/img/diyi.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[0].head_img" style="border: 3px #FFEFAA solid;"></image>
						<view class="num flexc">{{list[0].points}}</view>
					</view>
					<view class="name flexc slh">{{list[0].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[0])"></image></view>
				</view>
			</view>
			<view class="disan">
				<view  v-if="list[2]">
					<view class="hg flexc">
						<image src="../../static/assets/img/disan.png"></image>
					</view>
					<view class="tx flexc">
						<image :src="list[2].head_img" style="border: 3px #E58E4B solid;"></image>
						<view class="num flexc">{{list[2].points}}</view>
					</view>
					<view class="name flexc slh">{{list[2].name}}</view>
					<view class="flexc"><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(list[2])"></image></view>
				</view>
			</view>
		</view>
		<view class="center">
			<view class="li flexci" v-for="(item,index) in list2" :key="item.id">
				<view class="num flexc">{{index+4}}</view>
				<view class="tx flexc slh">
					<image :src="item.head_img"></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="shuzhi flexcc" style="flex-grow: 1;">
					<span>{{item.points}}</span>
					<view><image src="../../static/assets/img/x333.png" style="width: 56rpx; height: 56rpx;" @click="gos(item)"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:"",
				list2:"",
				eventChannel:""
			}
		},
		onShow() {
			this.getlist()
			this.eventChannel = this.getOpenerEventChannel();
		},
		methods: {
			gos:function(item){
				console.log(item)

				let obj = {
					head_img:item.head_img,
					id: item.player_id,
					username: item.name
				}
				uni.setStorageSync('checkren',JSON.stringify(obj))
				this.$nextTick(item=>{
					this.eventChannel.emit('songliwu',1)
					uni.navigateBack()
				})
			},
			getlist:function(){
				uni.$u.http.get(this.urlass + '/api/v1/group/gift/player',{
					params:{
						activity_id:uni.getStorageSync('activity_id'),
						token: uni.getStorageSync('token'),
						page:1,
						page_size:100,
						package_id:uni.getStorageSync('pack_id')
					}
				}).then(res => {
					this.list = res.data.data
					this.list2 = this.list.filter((item,index)=>index>2)
					console.log(this.list2)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	    font-family: "shuzi"; /* Project id  */
	    src: url('../../static/assets/Black.TTF')
	}
	.content {
		.top {
			width: 750rpx;
			height: 784rpx;
			position: relative;

			.dier {
				position: absolute;
				left: 70rpx;
				top: 370rpx;
				text-align: center;
				
				.tx{
					image {
						width: 106rpx;
						height: 106rpx;
						border-radius: 106rpx;
						border: 3px #2979FF solid;
						
					}
				}
			}

			.diyi {
				position: absolute;
				left: 300rpx;
				top: 340rpx;
				text-align: center;
				.tx{
					image {
						width: 115rpx;
						height: 115rpx;
						border-radius: 115rpx;
						border: 3px #2979FF solid;
						
					}	
				}
				
			}

			.disan {
				position: absolute;
				left: 540rpx;
				top: 370rpx;
				text-align: center;
				.tx{
					image {
						width: 106rpx;
						height: 106rpx;
						border-radius: 106rpx;
						border: 3px #2979FF solid;
						
					}
				}
				
			}

			.hg {
				position: relative;
				top: 8rpx;

				image {
					width: 47rpx;
					height: 36rpx;
				}
			}

			.tx { position: relative;
				
			}

			.name { width: 150rpx;
				color: #FFFFFF;
				margin: 20rpx 0;
				font-size: 30rpx; font-weight: bold;
			}

			.num {
				position: absolute; bottom: -20rpx; left:50%;
				border-radius: 30rpx;
				padding: 2rpx 10rpx;
				font-weight: bold;
				background: #FFFFFF;
				color: #F44B4F;
				font-size: 30rpx; font-family: 'shuzi';
			}
		}

		.center {background: #FFFFFF; position: relative; top:-60rpx; border-radius:30rpx;
			.li {
				border-bottom: 1px #F2F2F2 solid;
				padding: 20rpx 0;

				.num {
					width: 100rpx;
					text-align: center;
					font-weight: 900;
					color: #F44B4F;
					font-size: 29rpx; font-family: 'shuzi';
				}

				.tx {
					image {
						width: 82rpx;
						height: 82rpx;
						border-radius: 82rpx;
					}
				}

				.name {
					width: 360rpx;
					padding-left: 25rpx;
					text-align: left;
					font-size: 25rpx; font-weight: 900;
				}

				.shuzhi { padding-right:30rpx;
					span {
						padding: 15rpx 30rpx; font-family: 'shuzi';
						background: #FFEFEF;
						border-radius: 30rpx;
						color: #F44B4F;
						font-weight: bold;  margin-right:35rpx;
					}
				}
			}

		}
	}
</style>
